<template>
    <div class="layout_left">
        <el-menu
            :default-active="route.path"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            model="horizontal"
            :unique-opened="true"
            :collapse-transition="true"
            :router="true"
        >
            <div class="admin_logo">
                <img src="@/static/images/wap_logo.png" />
                <span v-show="logoTtileStatus">音乐后台管理系统</span>
            </div>

            <template v-for="item in menuStore.routerUrlList" :key="item.id">
                <router-link
                    v-if="!item.children || item.children.length <= 0"
                    :to="item.routerUrl"
                >
                    <el-menu-item
                        :index="item.routerUrl"
                        @click="toNavOptionClick(item)"
                        :route="route"
                    >
                        <el-icon>
                            <svg class="icon" aria-hidden="true">
                                <use :xlink:href="item.icon"></use>
                            </svg>
                        </el-icon>
                        <template #title>{{ item.title }}</template>
                    </el-menu-item>
                </router-link>
                <el-sub-menu v-else :index="item.routerUrl">
                    <template #title>
                        <el-icon>
                            <svg class="icon" aria-hidden="true">
                                <use :xlink:href="item.icon"></use>
                            </svg>
                        </el-icon>
                        <span>{{ item.title }}</span>
                    </template>
                    <subMenu :subMenuList="item.children"></subMenu>
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, onMounted } from "vue";
import { useRoute } from "vue-router";
import emitter from "@/utils/bus";
import subMenu from "./sub_menu.vue";
import piniaStore from "@/store/index";
const route = useRoute();
const menuStore = piniaStore();
const isCollapse = ref(false);
const logoTtileStatus = ref(true);
let props = defineProps(["isCollapseParent"]);
let toNavOptionClick = (raw: any) => {
    let optionItem = {
        id: raw.id,
        routerUrl: raw.routerUrl,
        title: raw.title,
        icon: raw.icon,
        isActive: true,
    };
    menuStore.setNavOptions(optionItem);
    menuStore.setCrumbs(optionItem.title);
};

isCollapse.value = props.isCollapseParent;
onMounted(() => {
    emitter.on("isCollapseParent", (res: any) => {
        isCollapse.value = !res;
        logoTtileStatus.value = res;
    });
});
onBeforeMount(() => {
    emitter.off("isCollapseParent");
});
</script>
<style lang="scss" scoped>
@import "@/static/css/common.scss";

.layout_left {
    overflow-y: auto;
    height: 100%;
    max-height: inherit;
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
    box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 10%);
    border-right: 1px solid #eee;
    max-width: 202px;
    .admin_logo {
        padding: 10px 0;
        white-space: nowrap;
        min-height: 32px;
        text-indent: 16px;
        position: relative;

        img {
            width: 32px;
        }

        span {
            display: inline-block;
            justify-content: center;
            line-height: 32px;
            font-size: 16px;
            font-weight: 700;
            color: #4d70ff;
            vertical-align: middle;
            position: absolute;
        }
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

    :deep(.el-menu-item-group__title) {
        display: none;
    }

    :deep(.el-sub-menu__title) {
        height: 42px !important;
    }

    .el-menu-item {
        height: 42px;
    }

    :deep(.el-sub-menu .el-sub-menu__icon-arrow) {
        font-size: 14px;
    }

    .el-menu {
        border-right: none;
    }

    ::-webkit-scrollbar {
        width: 1px;
    }

    .layout_left::-webkit-scrollbar-thumb {
        background: #eee;
    }
}
</style>
